<template>
  <div>
    <div class="bigContainer">
      <!--设置背景-->
      <table></table>
      <h1 class="KeLe">KeLe</h1>
      <div class="loginSign">
        <!--登录注册的大盒子-->
        <div class="loginSignPa">
          <!--让盒子缩小到一定范围是距离两边有边框-->
          <div class="loginContainer">
            <!--登录-->
            <div class="loginBtnContainer">
              <button class="loginBtn">登录</button>
            </div>
            <div class="handoverLogin">
              <div class="loginInputContainer">
                <!--这里是直接登录的页面--><!--就先写这一个登录/这个是重点/开始-->
                <h2 class="loginH2">登录</h2>
                <div class="relative">
                  <input
                    class="userName"
                    v-model="logemail"
                    name="email"
                    type="email"
                    placeholder="邮箱"
                  />
                </div>
                <div class="relative">
                  <input
                    class="password"
                    v-model="logpassword"
                    name="password"
                    type="password"
                    placeholder="密码"
                  />
                </div>
                <div class="relative">
                  <input class="login_btn" @click="login" type="submit" value="登录" />
                </div>
                <div class="cutLogin">其他登录方式</div>
              </div>
              <!--就先写这一个登录/这个是重点/结束-->

              <!--这里是邮箱登录的页面-->
              <div class="emailLogin">
                <div class="returnLoginEmail">
                  <img src="/assets/img/zuojiantou.png" alt="" />
                </div>
                <div class="returnLl">返回</div>
                <h2>邮箱登录</h2>
                <div class="emailLoginInput">
                  <input
                    class="emailLoginInputTextT"
                    type="text"
                    placeholder="请输入邮箱号码"
                  />
                </div>
                <div class="valiLoginInput">
                  <input
                    class="VerificationCode"
                    type="text"
                    placeholder="验证码"
                  />
                  <button class="valiBtn">获取验证码</button>
                </div>
                <input class="emailLoginBtn" type="button" value="登录" />
              </div>
            </div>
          </div>
          <div class="signContainer">
            <!--注册-->
            <div class="singBtnContainer">
              <button class="signBtn">注册</button>
            </div>
            <div class="handoverSign">
              <div class="signInputContainer">
                <!--这里的盒子在切换注册方式时要用--><!--就先写这一个注册/这个是重点/开始-->
                <h2 class="signH2">注册</h2>
                <div class="relative">
                  <input
                    class="signuserName"
                    v-model="regemail"
                    type="text"
                    placeholder="邮箱"
                  />
                </div>
                <div class="relative">
                  <input
                    class="signpassword"
                    type="password"
                    placeholder="密码"
                  />
                </div>
                <div class="relative">
                  <input
                    class="signpassword"
                    v-model="regpassword"
                    type="password"
                    placeholder="确认"
                  />
                </div>
                <div class="relative">
                  <input class="signTrue" type="text" placeholder="验证码" />
                </div>
                <div class="comple"></div>
                <div class="privacy">
                  <input class="privacyInput" type="checkbox" />
                  <a class="read" href="javascript:;">我已阅读并同意</a>
                  <a class="privacyA" href="templates/termsOfUse.html"
                    >使用条款</a
                  >
                </div>
                <input class="sign_btn" @click="reg" type="button" value="注册" />
                <div class="cut">切换其他方式注册</div>
              </div>
              <div class="signEmail">
                <!----这里是邮箱注册-->
                <div class="returnSignEmail">
                  <img src="/assets/img/zuojiantou.png" alt="" />
                </div>
                <div class="returnLl">返回</div>
                <h2>邮箱注册</h2>
                <div class="emailLoginInput">
                  <input
                    class="emailLoginInputText"
                    type="text"
                    placeholder="请输入QQ邮箱号码"
                  />
                </div>
                <div class="identifyingPassword">
                  <input
                    class="identifyingPasswordInput"
                    type="password"
                    placeholder="密码(8~12位数)"
                  />
                </div>
                <div class="identifyingPassword">
                  <input
                    class="identifyingPasswordInput"
                    type="password"
                    placeholder="确认密码"
                  />
                </div>
                <div class="valiLoginInput">
                  <input
                    class="identifyingInput"
                    type="text"
                    placeholder="验证码"
                  />
                  <button class="valiBtn">获取验证码</button>
                </div>
                <input class="emailLoginBtn" type="button" value="注册" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tips">注册成功</div>
  </div>
</template>

<script>
import { waibu } from "../../assets/js/index.js";
export default {
  name: "UserLogin",
  data() {
    return {
      logemail,
      logpassword,
      regemail,
      regpassword,
    };
  },
  mounted: function () {
    this.waibu();
  },
  methods: {
    waibu() {
      waibu();
    },
    async login() {
      const { data: res } = await this.$http.post("/api/user/login", {
        email: this.logemail,
        password: this.logpassword,
      });
      console.log(res);
      if (res.code !== 200) return this.$message.error(res.message);
      this.$message.success("登录成功");
      window.sessionStorage.setItem("user", res.data.id);
      this.$router.push("/home");
    },
    async reg() {
      const { data: res } = await this.$http.post("/api/user", {
        email: this.regemail,
        password: this.regpassword,
      });
      console.log(res);
      if (res.code !== 200) return this.$message.error(res.message);
      this.$message.success("注册成功，请登录");
      // window.sessionStorage.setItem("user", res.data.id);
      this.$router.push("/");
    },
  },
};
</script>

<style src="../../assets/css/index.css" scoped>
</style>